Let's talk briefly about what is going on "under the hood" of Layout Master, then we'll turn to working with the application itself. While this section isn't absolutely necessary to working with Layout Master, you might find it helpful in understanding what all this page layout stuff is about.
CSS2 introduced the first fully fledged recommendation from the W3C for a way to absolutely position HTML elements on a web page. This means that as a web developer, using CSS2 you are able to specify the location and size of any elements on a web page, either in relation to the page itself, or relative to where the element would otherwise be positioned by the browser. Although the draft of CSS-P (positioning) followed shortly after the original CSS1 recommendation, CSS2 was the formal adoption of positioning by the W3C.
CSS2 introduced a way to position an HTML element anywhere on a web page. And indeed it does a good deal more than provide "pixel level placement" of paragraphs and other elements. It provides a whole mechanism for creating page layouts which adapt to the way a page is viewed. From a hand-coding point of view, however, CSS positioning isn't necessarily simple to use. Particularly, translating your ideas into text based CSS "instructions" and HTML is far from intuitive.
So, just how does this work in practice? With CSS2, any element (such as a <p> or a <div>, but also an <image>, a <table> and so on) can be given a position of
absolute
fixed
relative
static
Layout Master is for working with the first two, absolute and fixed positioning. With Layout Master then you can set the position property of an element to absolute or fixed.
When an element is given an absolute position, it is positioned at a specific point with respect to the top left hand corner of its parent element (that is the element which contains it). The parent of the element may be the body, in which case, its position will be with respect to the top left hand corner of the page.
When an element is given a fixed position, it is positioned at a specific point with respect to the top left hand corner of the window. When a user scrolls the page, the element remains in a fixed position from the top and left of the window.
Let's take a look at a positioning example in HTML and CSS code, before turning to Layout Master.
A positioned element (known often as a "layer", and sometimes as a "floating box") is any HTML element (though for practical reasons we'll learn about shortly, almost always a <div>) for which there is a style sheet rule which gives that element a position property, and then a top, left and/or other placement properties which specify where the element will be placed.
Let's just underline this aspect. For an element to be positioned on a page, it needs
position property, with a value of absolute or fixed
top, left and or other placement properties, which specify the location of the element either in relation to the parent of the element, for absolute positioning (usually the page, but also possibly another positioned element), or in relation to the window itself, for fixed positioning.
As a simple example, we might want to create a navigation bar that sits on the left hand side of a page, with the contents of the page to the right of it. Here we would create two elements, one for the navigation bar, and one for the content. In our HTML body, we would have
<div id="navigation-bar"><a href="index.html">home</a>...</div>
<div id="content">This is the content of the page</div>
Now, we need two rules in a style sheet which position these elements.
#navigation-bar {position: absolute; left: 2%; width 10%}
#content {position: absolute; left: 15%; width 70%}
Sounds a little complicated? Don't worry, that's where Layout Master comes in. With Layout Master you can create lean, CSS and HTML standards based page layouts by dragging and dropping, and editing values directly in editors. There aren't layers of metaphors hiding the code, but at the same time, you aren't overwhelmed by that code. When you've created the layout you want, you can continue to edit your html with your HTML or web development tool of choice (from notepad to DreamWeaver). And if the layout needs fine tuning or modifying, you can open it back up in Layout Master and do just that. We especially worked hard to ensure that Layout Master is compatible with DreamWeaver, GoLive and with all possible ways of creating page layouts as specified by CSS2 - embedded, inline and linked style sheets.
So don't worry if you haven't completely digested this, now you're going to learn how to use CSS positioning the easy way.